<template>
  <view class="page">
    <!-- #ifndef MP-WEIXIN-->
    <!-- 小程序不需要返回（自带） -->
    <!-- <my-navbar
      leftText="收货地址"
      :height="100"
      :background="'#ffffff'"
      @leftClick="back"
    ></my-navbar> -->
    <!-- #endif -->
    <hx-navbar ref="hxnb" :config="config" @clickBtn="Btn" />

    <view class="content" v-if="!address">
      <view class="content-box">
        <map
          class="content-box-map"
          latitude="28.70"
          longitude="115.85"
          @tap="getInfo"
        >
        </map>
        <view class="content-box-tips flex-row-between" @click="chooseMap">
          <span class="title">选择地址</span>
          <u-icon name="arrow-right" color="#999999" size="28"></u-icon>
        </view>
      </view>
    </view>

    <view class="content" v-else>
      <view class="content-box">
        <view class="content-box-info flex-row-between">
          <view class="content-box-info-left flex-column-start">
            <div class="userAdd">{{ address_name }}</div>
            <span class="userAddress">{{ address }}</span>
          </view>
          <view @click="chooseMap">
            <u-icon name="edit-pen" color="#999999"></u-icon>
          </view>
        </view>
        <span class="content-box-user">门牌号</span>
        <u-input
          class="content-box-input"
          v-model="form.menpai"
          :border="formConfiguration.border"
          :height="formConfiguration.height"
          clearable
          placeholder="请输入收件人门牌号"
        />
      </view>
    </view>

    <view class="content">
      <view class="content-box">
        <span class="content-box-user">联系人</span>
        <u-input
          class="content-box-input"
          v-model="form.name"
          :border="formConfiguration.border"
          :height="formConfiguration.height"
          clearable
          placeholder="请输入收件人名称"
        />
        <span class="content-box-user">手机号</span>
        <u-input
          class="content-box-input"
          v-model="form.phone"
          :border="formConfiguration.border"
          :height="formConfiguration.height"
          clearable
          placeholder="请输入收件人手机号"
        />
      </view>
    </view>
    <!-- <view class="edit">
      <view class="row">
        <view class="prop">收货地址</view>
         <input type="text" @click="chooseMap" @input="inputAction($event,'address_name')" :value="address_name" /> -->
    <!-- <view class="chosoe_address" @click="chooseMap">{{
          address_name
        }}</view>
      </view>
      <view class="row">
        <view class="prop">门牌号</view>
        <input
          type="text"
          @input="inputAction($event, 'detail')"
          :value="detail"
          class="detail"
        />
      </view>
    </view>

    <view class="edit tops">
      <view class="row">
        <view class="prop">收件人</view>
        <input type="text" @input="inputAction($event, 'name')" :value="name" />
      </view>
      <view class="row">
        <view class="prop">手机号</view>
        <input
          type="number"
          @input="inputAction($event, 'address_mobile')"
          :value="address_mobile"
        />
      </view>
    </view> -->
    <view class="submit flex-center" @click="submit">提交</view>
  </view>
</template>

<script>
// import BaiduMap from 'vue-baidu-map'
// import { jsonp } from "vue-jsonp";
import { $https } from "@/static/js/request.js";
export default {
  data() {
    return {
      config: {
        title: "添加新地址",
        color: "#333333",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#ffffff", "#ffffff"]],
        // 滑动屏幕后切换颜色，注意颜色为数组时长度必须一样，还有使用滑动切换必须监听 onPageScroll 事件
        slideBackgroundColor: [0, ["#ffffff", "#ffffff"]],
        // 状态栏 ，数组则为滑动变色
        statusBarBackground: ["", "#ffffff"],
      },

      address: "",
      address_name: "",
      name: "",
      address_mobile: "",
      detail: "",
      lng_mars: "",
      lat_mars: "",

      zid: null, //子账号id
      address_form: null,

      formConfiguration: {
        height: 100,
        border: true,
      },

      form: {
        name: null, // 收件人名称
        phone: null, // 收件人手机号
        menpai: null, // 收件人门牌号
      },
    };
  },
  onLoad(options) {
    if (options.zid) {
      this.zid = options.zid;
      this.getChildData(this.zid);
    } else {
      this.getData();
    }
  },
  methods: {
    getData() {
      $https("GETN", "getUserInfo", {}, (res) => {
        this.address = res.data.data.address.address;
        this.address_name = res.data.data.address.address_name;
        this.detail = res.data.data.address.detail;
        this.name = res.data.data.address.name;
        this.address_mobile = res.data.data.address.mobile;
        this.lng_mars = res.data.data.address.lng_mars;
        this.lat_mars = res.data.data.address.lat_mars;
        this.form.menpai = res.data.data.address.detail;
        this.form.name = res.data.data.address.name;
        this.form.phone = res.data.data.address.mobile;
        console.log("11", this.form);
      });
    },
    getChildData(id) {
      $https("GETN", "ziAccountDetail", { id }, (res) => {
        this.address = res.data.data.address.address;
        this.address_name = res.data.data.address.address_name;
        this.detail = res.data.data.address.detail;
        this.name = res.data.data.address.name;
        this.address_mobile = res.data.data.address.mobile;
        this.lng_mars = res.data.data.address.lng_mars;
        this.lat_mars = res.data.data.address.lat_mars;
      });
    },
    inputAction(e, name) {
      this[name] = e.detail.value;
    },
    submit() {
      if (this.form.menpai && this.form.name && this.form.phone) {
        var phone = this.form.phone;
        if (!/^((0\d{2,3}-\d{7,8})|(1[23567894]\d{9}))$/.test(phone)) {
          uni.showToast({
            title: "手机号格式错误",
            icon: "none",
          });
          return false;
        } else if (!this.lng_mars || !this.lat_mars) {
          uni.showToast({
            title: "请重新选择收货地址",
            icon: "none",
          });
          return false;
        } else {
          let option = {
            address: this.address,
            address_name: this.address_name,
            // detail: this.detail,
            // name: this.name,
            // address_mobile: this.address_mobile,
            detail: this.form.menpai,
            name: this.form.name,
            address_mobile: this.form.phone,
            lng_mars: this.lng_mars,
            lat_mars: this.lat_mars,
          };

          if (this.zid) {
            Object.assign(option, { zid: this.zid });
          }
          $https("POST", "editUserAddress", option, (res) => {
            if (res.data.errcode == 0) {
              uni.showToast({
                title: "修改成功",
                icon: "none",
              });
              this.back();
            } else {
              uni.showToast({
                title: res.data.errmsg,
                icon: "none",
              });
            }
          });
        }
      } else {
        if (this.form.menpai == "") {
          uni.showToast({
            title: "地址不能为空",
            icon: "none",
          });
        } else if (this.form.name == "") {
          uni.showToast({
            title: "联系人不能为空",
            icon: "none",
          });
        } else if (this.form.phone == "") {
          uni.showToast({
            title: "手机号不能为空",
            icon: "none",
          });
        }
        // else if(this.detail == ''){
        // 	uni.showToast({
        // 		title: '门牌号不能为空',
        // 		icon:'none'
        // 	});
        // }
      }
    },

    chooseMap() {
      uni.getLocation({
        type: "gcj02",
        success: (result) => {
          uni.chooseLocation({
            latitude: result.latitude,
            longitude: result.longitude,
            success: (res) => {
              console.log(res, "rest");
              this.address = res.address;
              this.address_name = res.name;
              this.lat_mars = res.latitude;
              this.lng_mars = res.longitude;
              // this.hasLocation = true,
              // this.location = formatLocation(res.longitude, res.latitude),
              // this.locationAddress = res.address
            },
          });
        },
        fail: (e) => {
          console.log(e);
        },
      });
    },

    back() {
      // #ifdef H5
      window.history.back(-1);
      // #endif
      // #ifndef H5
      uni.navigateBack();
      // #endif
    },
    // 点击地图时的回调函数
    getInfo() {
      return;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/static/scss/index.scss";
/deep/.u-input__input {
  min-height: 80rpx !important;
}
.page {
  .content {
    width: 100%;
    padding: 0 30rpx;
    &-box {
      width: 100%;
      background: #fff;
      margin-top: 20rpx;
      padding: 30rpx;
      border-radius: 20rpx;
      &-map {
        width: 100%;
        height: 300rpx;
        border-radius: 20rpx;
      }
      &-tips {
        align-items: center;
        width: 100%;
        margin-top: 30rpx;
        .title {
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #333333;
        }
      }
      &-user {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
      }
      &-input {
        margin-top: 20rpx;
        margin-bottom: 20rpx;
      }
      &-info {
        align-items: center;
        margin-bottom: 20rpx;
        &-left {
          width: calc(100% - 100rpx);
          .userAdd {
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 30rpx;
            color: #333333;
          }
          .userAddress {
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999999;
            margin-top: 10rpx;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }

  .edit {
    padding: 20rpx 30rpx;
    color: #191919;
    margin: 20rpx 30rpx 20rpx 30rpx;
    background: #ffffff;
    border-radius: 20rpx;

    .row {
      padding: 22rpx 0 0;
      // border-bottom: 2px solid #ececec;
      .rows {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .prop {
          font-size: $font_1;
          // font-weight: 600;
          font-family: PingFang SC;
          font-weight: bold;
          color: #333333;
        }
      }
      .prop {
        font-size: $font_2;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
      }

      input {
        font-size: $font_2;
        margin-top: 24rpx;
        padding-left: 36rpx;
        background: rgb(246, 246, 249);
        // opacity: 0.08;
        border-radius: 20rpx;
        // width: 578rpx;
        height: 96rpx;
        font-size: 28rpx;
        font-family: PingFang SC;
        // font-weight: bold;
        color: #333333;
      }

      .chosoe_address {
        height: 68rpx;
        display: flex;
        align-items: center;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #999999;
      }
    }
  }
  .tops {
    padding-bottom: 60rpx;
  }

  .submit {
    width: 566rpx;
    height: 88rpx;
    color: #fff;
    background: #40ae36;
    box-shadow: 0px 2rpx 14rpx 2rpx rgba(0, 0, 0, 0.2);
    border-radius: 48rpx;
    font-size: $font_3;
    // position: fixed;
    // bottom:180rpx;
    // left:0;
    // right:0;
    margin: auto;
    margin-top: 70rpx;
  }
}
/deep/.hx_font_size {
  font-weight: bold;
}
/deep/ div[onpositionupdate="return;"] {
  opacity: 0 !important;
  pointer-events: none;
}

/deep/.uni-textarea-textarea {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
}
/deep/ .hx_font_size {
  span {
    font-family: PingFang SC;
  }
}
</style>
